<template>
    <div id="pieReport" style="width: 400px;height: 270px;"></div>
</template>

<script>
export default {
  name: "rateValue",
  data() {
    return {
      charts: "",
      // opinion: ["及格人数", "未及格人数","123"],
      opinionData: [
        { value: 12, name: "基金一比例", itemStyle: "#1ab394" },
        { value: 18, name: "基金二比例", itemStyle: "yellowgreen" },
        { value: 12, name: "基金三比例", itemStyle: "#0099FC" }
      ]
    };
  },
  props: {
    ratio: []
  },
  watch:{
    ratio(res){
      this.drawPie("pieReport",res);
    }
  },
  methods:{
    drawPie(id,res) {
      console.log("rate子组件接收：" + res[0].fundRatio)
      for (var i = 0; i < 3; i++) {
        this.opinionData[i].value = res[i].fundRatio
      }
      this.charts = this.$echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: '投入比例',
          x:'center',
          y:10
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.opinion
        },
        series: [
          {
            name: "状态",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              color: function(params) {
                //自定义颜色
                var colorList = ["#1ab394","yellowgreen", "#0099FC"];
                return colorList[params.dataIndex];
              }
            },
            data: this.opinionData
          }
        ]
      });
    },
  },
  // mounted() {
  //   this.$nextTick(function() {
  //     this.drawPie("pieReport");
  //   });
  // }
}
</script>
